<!DOCTYPE html>
<html  lang="zh">
<head>
    <meta charset="utf-8" />

<meta name="generator" content="Hexo 3.9.0" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title>JQuery: 开箱即用的js库 - Ayang818&#39;s blog</title>


    <meta name="description" content="1.基本使用要使用首先要先引入CDN &amp;lt;script src=&quot;https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;  使用超级简单，通常是这样的格式 $(&quot;&quot;).action(function() &amp;#123;&amp;#125;)  即先选择，后监听事件，然后的形式">
<meta name="keywords" content="js">
<meta property="og:type" content="article">
<meta property="og:title" content="JQuery: 开箱即用的js库">
<meta property="og:url" content="https://ayang818.gitee.io/blog/2019/07/09/JQuery-开箱即用的js库/index.html">
<meta property="og:site_name" content="Ayang818&#39;s blog">
<meta property="og:description" content="1.基本使用要使用首先要先引入CDN &amp;lt;script src=&quot;https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;  使用超级简单，通常是这样的格式 $(&quot;&quot;).action(function() &amp;#123;&amp;#125;)  即先选择，后监听事件，然后的形式">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://ayang818.gitee.io/blog/images/og_image.png">
<meta property="og:updated_time" content="2020-02-11T09:43:07.703Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JQuery: 开箱即用的js库">
<meta name="twitter:description" content="1.基本使用要使用首先要先引入CDN &amp;lt;script src=&quot;https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;  使用超级简单，通常是这样的格式 $(&quot;&quot;).action(function() &amp;#123;&amp;#125;)  即先选择，后监听事件，然后的形式">
<meta name="twitter:image" content="https://ayang818.gitee.io/blog/images/og_image.png">







<link rel="icon" href="https://upload-serve.oss-cn-beijing.aliyuncs.com/avatar/avatar.jpg">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/androidstudio.css">


    
    
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">

    
    
    
    
<link rel="stylesheet" href="/blog/css/back-to-top.css">

    
    
    
    
    
    
    
    <link rel="stylesheet" href="/blog/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
    
    
    


<link rel="stylesheet" href="/blog/css/style.css">
</head>
<body class="is-3-column">
    <nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/blog/">
            
                <img src="https://upload-serve.oss-cn-beijing.aliyuncs.com/avatar/avatar.jpg" alt="JQuery: 开箱即用的js库" height="28">
            
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/blog/">主页</a>
                
                <a class="navbar-item"
                href="/blog/archives">归档</a>
                
                <a class="navbar-item"
                href="/blog/tags">分类</a>
                
                <a class="navbar-item"
                href="/blog/about">关于</a>
                
                <a class="navbar-item"
                href="https://github.com/ayang818">Github</a>
                
            </div>
            
            <div class="navbar-end">
                
                    
                    <a class="navbar-item" target="_blank" rel="noopener" title="Github" href="https://github.com/ayang818">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                    
                
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-9-widescreen has-order-2 column-main">
<div class="card">
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2019-07-09T12:51:40.000Z">2019-07-09</time>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    3 minutes 读完 (大约 490 个字)
                </span>
                
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                JQuery: 开箱即用的js库
            
        </h1>
        <div class="content">
            <h2 id="1-基本使用"><a href="#1-基本使用" class="headerlink" title="1.基本使用"></a>1.基本使用</h2><p>要使用首先要先引入CDN</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;script src=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<p>使用超级简单，通常是这样的格式</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">""</span>).action(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>即先选择，后监听事件，然后的形式</p>
<a id="more"></a>
<h2 id="2-选择器"><a href="#2-选择器" class="headerlink" title="2.选择器"></a>2.选择器</h2><p>选择器有三种</p>
<ul>
<li><p>元素选择器</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"TagName"</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>id选择器</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"#id"</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>类选择器</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">".class"</span>)</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="3-常见DOM-Document-Object-Model-事件"><a href="#3-常见DOM-Document-Object-Model-事件" class="headerlink" title="3.常见DOM(Document Object Model)事件"></a>3.常见DOM(Document Object Model)事件</h2><table>
<thead>
<tr>
<th>鼠标事件</th>
<th>键盘事件</th>
<th>表单事件</th>
<th>文档/窗口事件</th>
</tr>
</thead>
<tbody><tr>
<td>click(点击)</td>
<td>keypress(按键盘)</td>
<td>submit</td>
<td>load</td>
</tr>
<tr>
<td>dbclick(双击)</td>
<td>keydown</td>
<td>change</td>
<td>resize</td>
</tr>
<tr>
<td>mouseenter(鼠标穿过元素)</td>
<td>keyup</td>
<td>focus(获得光标焦点)</td>
<td>scroll</td>
</tr>
<tr>
<td>mouseleave(鼠标离开元素)</td>
<td></td>
<td>blur</td>
<td>unload</td>
</tr>
<tr>
<td>hover(光标悬停,两次操作)</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h2 id="4-JQuery效果"><a href="#4-JQuery效果" class="headerlink" title="4.JQuery效果"></a>4.JQuery效果</h2><ul>
<li><p>hide() 元素隐藏</p>
</li>
<li><p>show() 元素显示</p>
</li>
<li><p>toggle(fast/slow/1000, callback) 元素的隐藏和显示切换 </p>
</li>
<li><p>fadeIn() 淡入</p>
</li>
<li><p>fadeOut() 淡出</p>
</li>
<li><p>fadeToggle() 淡入淡出切换</p>
</li>
<li><p>fadeTo(speed, opacity, callback) 渐变到不透明度</p>
</li>
<li><p>slideDown() 向下滑动</p>
</li>
<li><p>slideUp() 向上滑动</p>
</li>
<li><p>slideToggle() 上下滑动切换</p>
</li>
<li><h2 id="5-JQuery捕获"><a href="#5-JQuery捕获" class="headerlink" title="5.JQuery捕获"></a>5.JQuery捕获</h2></li>
<li><p>text() 设置或返回所选元素的文本内容</p>
</li>
<li><p>html() 设置或返回所选元素的内容（包括 HTML 标记）</p>
</li>
<li><p>val() 设置或返回表单字段的值</p>
</li>
<li><p>attr() 用于获取属性值。</p>
</li>
</ul>
<h2 id="6-JQuery添加元素"><a href="#6-JQuery添加元素" class="headerlink" title="6.JQuery添加元素"></a>6.JQuery添加元素</h2><ul>
<li><p>append() 在被选元素的结尾插入内容（仍然该元素的内部）。</p>
</li>
<li><p>prepend() 在被选元素的开头插入内容。</p>
</li>
<li><p>after() 被选元素之后插入内容</p>
</li>
<li><p>before()  在被选元素之前插入内容</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> txt1=<span class="string">"&lt;b&gt;Useful &lt;/b&gt;"</span>;                    <span class="comment">// 使用 HTML 创建元素</span></span><br><span class="line"><span class="keyword">var</span> txt2=$(<span class="string">"&lt;i&gt;&lt;/i&gt;"</span>).text(<span class="string">"js-- "</span>);     <span class="comment">// 使用 jQuery 创建元素</span></span><br><span class="line"><span class="keyword">var</span> txt3 = <span class="built_in">document</span>.createElement(<span class="string">"big"</span>);  <span class="comment">// 使用 DOM 创建元素</span></span><br><span class="line">txt3.innerHTML=<span class="string">"jQuery!"</span>;</span><br><span class="line">$(<span class="string">"p"</span>).after(txt1,txt2,txt3);          <span class="comment">// 在图片后添加文本</span></span><br></pre></td></tr></table></figure>

<h2 id="7-JQuery删除元素"><a href="#7-JQuery删除元素" class="headerlink" title="7.JQuery删除元素"></a>7.JQuery删除元素</h2><ul>
<li><p>remove() 删除被选元素及其子元素</p>
</li>
<li><p>empty() 删除被选元素的子元素</p>
</li>
</ul>
<h2 id="8-JQuery-AJAX"><a href="#8-JQuery-AJAX" class="headerlink" title="8.JQuery AJAX"></a>8.JQuery AJAX</h2><ul>
<li><p>AJAX load(URL, data, callback) 从服务器加载数据，并把返回的数据放入被选元素中</p>
</li>
<li><p>$.get(URL, callback) 通过 HTTP GET 请求从服务器上请求数据</p>
</li>
<li><p>$.post(URL, data, callback) 通过 HTTP POST 请求向服务器提交数据</p>
</li>
</ul>

        </div>
        
        <hr style="height:1px;margin:1rem 0"/>
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <i class="fas fa-tags has-text-grey"></i>&nbsp;
                    <a class="has-link-grey -link" href="/blog/tags/js/">js</a>
                </div>
            </div>
        </div>
        
        
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3>
        <div class="buttons is-centered">
            
                
<a class="button is-info donate">
    <span class="icon is-small">
        <i class="fab fa-alipay"></i>
    </span>
    <span>支付宝</span>
    <div class="qrcode"><img src="https://computernetworking.oss-cn-hongkong.aliyuncs.com/temppic/alipay.jpg" alt="支付宝"></div>
</a>

                
        </div>
    </div>
</div>



<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/blog/2019/07/13/使用express实现注册登陆接口-以及jwt的使用/">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">使用express实现注册登陆接口,以及jwt的使用</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/blog/2019/07/07/javascript的浏览器对象/">
                <span class="level-item">javascript中的浏览器操作</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>


</div>
                




<div class="column is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
    
        
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                    <figure class="image is-128x128 has-mb-6">
                        <img class="" src="https://upload-serve.oss-cn-beijing.aliyuncs.com/avatar/avatar.jpg" alt="Ayang818 (杨丰畅)">
                    </figure>
                    
                    <p class="is-size-4 is-block">
                        Ayang818 (杨丰畅)
                    </p>
                    
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>中国，杭州</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <a href="/blog/archives">
                        <p class="title has-text-weight-normal">
                            43
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <a href="/blog/categories">
                        <p class="title has-text-weight-normal">
                            0
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <a href="/blog/tags">
                        <p class="title has-text-weight-normal">
                            29
                        </p>
                    </a>
                </div>
            </div>
        </nav>
        
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/ayang818" target="_blank" rel="noopener">
                关注我</a>
        </div>
        
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener"
                title="Github" href="https://github.com/ayang818">
                
                <i class="fab fa-github"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener"
                title="RSS" href="/blog/">
                
                <i class="fas fa-rss"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
    
        
    
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            链接
        </h3>
        <ul class="menu-list">
        
            <li>
                <a class="level is-mobile" href="https://blog.csdn.net/syh0313" target="_blank" rel="noopener">
                    <span class="level-left">
                        <span class="level-item">syh0313</span>
                    </span>
                    <span class="level-right">
                        <span class="level-item tag">blog.csdn.net</span>
                    </span>
                </a>
            </li>
        
            <li>
                <a class="level is-mobile" href="https://wzyxv1n.top/" target="_blank" rel="noopener">
                    <span class="level-left">
                        <span class="level-item">wenzhuan</span>
                    </span>
                    <span class="level-right">
                        <span class="level-item tag">wzyxv1n.top</span>
                    </span>
                </a>
            </li>
        
            <li>
                <a class="level is-mobile" href="https://blog.csdn.net/weixin_43434223" target="_blank" rel="noopener">
                    <span class="level-left">
                        <span class="level-item">旧博客</span>
                    </span>
                    <span class="level-right">
                        <span class="level-item tag">blog.csdn.net</span>
                    </span>
                </a>
            </li>
        
        </ul>
        </div>
    </div>
</div>

    
        <div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            标签云
        </h3>
        <a href="/blog/tags/Git/" style="font-size: 10px;">Git</a> <a href="/blog/tags/IDEA/" style="font-size: 10px;">IDEA</a> <a href="/blog/tags/Java/" style="font-size: 20px;">Java</a> <a href="/blog/tags/JavaWeb/" style="font-size: 10px;">JavaWeb</a> <a href="/blog/tags/Kotlin/" style="font-size: 10px;">Kotlin</a> <a href="/blog/tags/Kugga/" style="font-size: 10px;">Kugga</a> <a href="/blog/tags/Vue/" style="font-size: 10px;">Vue</a> <a href="/blog/tags/express/" style="font-size: 10px;">express</a> <a href="/blog/tags/js/" style="font-size: 12px;">js</a> <a href="/blog/tags/maven/" style="font-size: 10px;">maven</a> <a href="/blog/tags/mybatis/" style="font-size: 10px;">mybatis</a> <a href="/blog/tags/mysql/" style="font-size: 10px;">mysql</a> <a href="/blog/tags/python/" style="font-size: 10px;">python</a> <a href="/blog/tags/分布式理论/" style="font-size: 12px;">分布式理论</a> <a href="/blog/tags/前后端分离/" style="font-size: 14px;">前后端分离</a> <a href="/blog/tags/反射/" style="font-size: 10px;">反射</a> <a href="/blog/tags/并发编程/" style="font-size: 18px;">并发编程</a> <a href="/blog/tags/微服务/" style="font-size: 10px;">微服务</a> <a href="/blog/tags/日常技能/" style="font-size: 10px;">日常技能</a> <a href="/blog/tags/源码/" style="font-size: 10px;">源码</a> <a href="/blog/tags/算法/" style="font-size: 10px;">算法</a> <a href="/blog/tags/算法与数据结构/" style="font-size: 10px;">算法与数据结构</a> <a href="/blog/tags/老代码/" style="font-size: 10px;">老代码</a> <a href="/blog/tags/自嗨/" style="font-size: 10px;">自嗨</a> <a href="/blog/tags/设计模式/" style="font-size: 18px;">设计模式</a> <a href="/blog/tags/转载/" style="font-size: 10px;">转载</a> <a href="/blog/tags/部门教程/" style="font-size: 12px;">部门教程</a> <a href="/blog/tags/阶段总结/" style="font-size: 10px;">阶段总结</a> <a href="/blog/tags/随笔/" style="font-size: 16px;">随笔</a>
    </div>
</div>
    
    
        <div class="column-right-shadow  ">
        
            <div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-03-01T14:43:07.000Z">2020-03-01</time></div>
                    <a href="/blog/2020/03/01/java-instrument/" class="title has-link-black-ter is-size-6 has-text-weight-normal">浅析Java强大的动态Instrumention能力</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-02-14T08:32:18.000Z">2020-02-14</time></div>
                    <a href="/blog/2020/02/14/常用的一些算法板子-持续更新/" class="title has-link-black-ter is-size-6 has-text-weight-normal">常用的一些算法板子(持续更新)</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-02-06T09:52:56.000Z">2020-02-06</time></div>
                    <a href="/blog/2020/02/06/序列化动态规划解题技巧总结/" class="title has-link-black-ter is-size-6 has-text-weight-normal">序列化动态规划解题技巧</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-01-10T14:30:17.000Z">2020-01-10</time></div>
                    <a href="/blog/2020/01/10/寒假开始啦-开始进行Kugga的基础设施建设了/" class="title has-link-black-ter is-size-6 has-text-weight-normal">寒假开始啦! 开始进行Kugga的基础设施建设了!</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-12-31T07:27:54.000Z">2019-12-31</time></div>
                    <a href="/blog/2019/12/31/我-的-2-0-1-9/" class="title has-link-black-ter is-size-6 has-text-weight-normal">我 的 2 0 1 9</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
        
            <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">March 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2020/02/">
                <span class="level-start">
                    <span class="level-item">February 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">January 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">December 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2019/11/">
                <span class="level-start">
                    <span class="level-item">November 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2019/10/">
                <span class="level-start">
                    <span class="level-item">October 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2019/09/">
                <span class="level-start">
                    <span class="level-item">September 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">9</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2019/08/">
                <span class="level-start">
                    <span class="level-item">August 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">7</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2019/07/">
                <span class="level-start">
                    <span class="level-item">July 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">7</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/blog/archives/2019/06/">
                <span class="level-start">
                    <span class="level-item">June 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
        
            <div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                标签
            </h3>
            <div class="field is-grouped is-grouped-multiline">
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/Git/">
                        <span class="tag">Git</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/IDEA/">
                        <span class="tag">IDEA</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/Java/">
                        <span class="tag">Java</span>
                        <span class="tag is-grey">20</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/JavaWeb/">
                        <span class="tag">JavaWeb</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/Kotlin/">
                        <span class="tag">Kotlin</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/Kugga/">
                        <span class="tag">Kugga</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/Vue/">
                        <span class="tag">Vue</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/express/">
                        <span class="tag">express</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/js/">
                        <span class="tag">js</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/maven/">
                        <span class="tag">maven</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/mybatis/">
                        <span class="tag">mybatis</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/mysql/">
                        <span class="tag">mysql</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/python/">
                        <span class="tag">python</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/分布式理论/">
                        <span class="tag">分布式理论</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/前后端分离/">
                        <span class="tag">前后端分离</span>
                        <span class="tag is-grey">3</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/反射/">
                        <span class="tag">反射</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/并发编程/">
                        <span class="tag">并发编程</span>
                        <span class="tag is-grey">9</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/微服务/">
                        <span class="tag">微服务</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/日常技能/">
                        <span class="tag">日常技能</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/源码/">
                        <span class="tag">源码</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/算法/">
                        <span class="tag">算法</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/算法与数据结构/">
                        <span class="tag">算法与数据结构</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/老代码/">
                        <span class="tag">老代码</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/自嗨/">
                        <span class="tag">自嗨</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/设计模式/">
                        <span class="tag">设计模式</span>
                        <span class="tag is-grey">9</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/转载/">
                        <span class="tag">转载</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/部门教程/">
                        <span class="tag">部门教程</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/阶段总结/">
                        <span class="tag">阶段总结</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/blog/tags/随笔/">
                        <span class="tag">随笔</span>
                        <span class="tag is-grey">4</span>
                    </a>
                </div>
                
            </div>
        </div>
    </div>
</div>
        
        </div>
    
</div>

                
            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container">
        <div class="level">
            <div class="level-start has-text-centered-mobile">
                <a class="footer-logo is-block has-mb-6" href="/blog/">
                
                    <img src="https://upload-serve.oss-cn-beijing.aliyuncs.com/avatar/avatar.jpg" alt="JQuery: 开箱即用的js库" height="28">
                
                </a>
                <p class="is-size-7">
                &copy; 2020 ayang818&nbsp;
                Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
                
                </p>
            </div>
            <div class="level-end">
            
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" rel="noopener" title="Creative Commons" href="https://creativecommons.org/">
                        
                        <i class="fab fa-creative-commons"></i>
                        
                    </a>
                </p>
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" rel="noopener" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/">
                        
                        <i class="fab fa-creative-commons-by"></i>
                        
                    </a>
                </p>
                
                </div>
            
            </div>
        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-Hans");</script>


<script>
var IcarusThemeSettings = {
    site: {
        url: 'https://ayang818.gitee.io/blog',
        external_link: {"enable":true,"exclude":[]}
    },
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>





<script src="/blog/js/animation.js"></script>



<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
<script src="/blog/js/gallery.js" defer></script>



<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
});
</script>


<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/blog/js/back-to-top.js" defer></script>














<script src="/blog/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/blog/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/blog/js/insight.js" defer></script>
<link rel="stylesheet" href="/blog/css/search.css">
<link rel="stylesheet" href="/blog/css/insight.css">
    
<script src="/blog/node_modules/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"node_modules/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/blog/node_modules/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
</html>